import { useRouteError } from 'react-router'
import { Button, Result } from 'antd'

import { REFRESH_TO_LOGIN_PAGE_MSG } from '@/consts/consts'

/** 路由组件异常反馈 */
export const RouteErrorBoundary = () => {
  const err = useRouteError()
  let msg

  if (err instanceof Error) {
    msg = err.message
  }
  msg = `${(err instanceof Error && err.name) || 'unknown'}::${msg}`

  if (msg.includes(REFRESH_TO_LOGIN_PAGE_MSG)) return null

  if (import.meta.env.DEV || import.meta.env.VITE_APP_ENV === 'staging') {
    msg = (
      <>
        <div>以下信息只会在开发环境或staging环境中显示</div>
        {msg}
      </>
    )
  } else {
    msg = null
  }

  return (
    <Result
      status="error"
      title="该页面报错了，请尝试刷新"
      subTitle={msg}
      extra={<Button onClick={() => location.reload()}>点击刷新</Button>}
    />
  )
}
